<!-- 商城启动页 -->
<template>
	<view class="index-box">
		<nav-bar type="fixed" :backState="2000" :bgColor="['#2ba4f7', '#8bd8fe']" :titleCenter="false" title="Open-Mall">
			<image class="Title" src="../../static/icon/logo.png" mode="heightFix"></image>
			<navigator class="search_box u-f-ac" hover-class="none" url="../common/search/search">
				<text class="iconR iconfont icon-sousuo"></text>
				<text class="prompt padding-xs">搜索</text>
			</navigator>
		</nav-bar>
		<view class="nav-tab">
			<view class="top u-f-jsb">
				<view v-for="i in navList">
					<text class="icon iconfont" :class="i.icon"></text>
					{{i.name}}
				</view>
			</view>
			<view class="choose-post u-f-jsb u-f-ac">
				<navigator hover-class="none" url="../common/postStation/postStation" class=" post u-f-jsb flex1">
					<view class="post-name text-cut flex1">自提点：{{pickUpPoint.pick_name || '请选择自提点'}}</view>
					<view class="change">切换<text class="icon iconfont icon-right text-white"></text></view>
				</navigator>
				<button class="pro-button" open-type="share">
					<text class="icon iconfont icon-fenxiang"></text>
					分享
				</button>
			</view>
			<!-- 消息轮动 -->
			<Pengpai-FadeInOut
				:duration="2000"
				:wait="1000"
				:top="150"
				:left="10"
				:radius="60"
				:loop="true"
				:info="item"
				v-for="(item, index) in list"
				:key="index"
			></Pengpai-FadeInOut>
			<!-- 轮播图 -->
			<swiper
				:indicator-dots="true"
				:autoplay="true"
				:interval="5000"
				:duration="150"
				class="tui-banner-swiper square-dot"
				:circular="true"
				indicator-color="rgba(255, 255, 255, 0.8)"
				indicator-active-color="#2ba4f7"
			>
				<swiper-item v-for="(item, index) in advertList" @click="Route({url:item.advertUrl})">
					<image :src="item.picUrl" class="tui-slide-image" mode="scaleToFill"/>
				</swiper-item>
			</swiper>
		</view>
		<!-- 滑动菜单 -->
		<view class="unicorn-header2">
			<view class="menu">
				<block v-for="(item, index) in tab" :key="item.id">
					<view class="menu-in" @click="Route({url:item.url,intercept:item.intercept})">
						<image :src="'../../static/icon/'+ item.img" class="menu-img" mode="scaleToFill"></image>
						<view class="menu-name text-cut">{{ item.name }}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 秒杀商品 -->
		<view class="bg-white seckill-box">
			<view class="u-f-jsb margin-bottom-sm">
				<view class="u-f-ajc text-bold u-f-ac ">
					<image src="../../static/icon/xxx.png" class="seckill-tit" mode="widthFix" :lazy-load="true"></image>
					<text class="text-32">限时秒杀</text>
				</view>
				<navigator hover-class="none" url="../home/seckill/seckill" class="text-gray text-sm u-f-ac">{{total}}个商品即将抢光<text class="icon iconfont icon-right "></text></navigator>
			</view>
			<scroll-view scroll-x class="scroll-box" scroll-with-animation>
				<view class="seckill-item" v-for="(item,index) in seckillList"  @click="Route({url:`/pages/home/groupWord/groupDetail?productId=${item.id}`})">
					<image :src="item.mainPicture" mode="aspectFill"></image>
					<text class="discount">已省{{$compute.accSub(item.relation.marketPrice,item.relation.productPrice)}}元</text>
					<view class="title text-cut">{{ item.productName }}</view>
					<view>
						<text class="price text-red text-bold text-df ">
								￥{{item.relation.productPrice}}
						</text>
						<text class="price text-gray text-sm">
								￥{{item.relation.marketPrice}}
						</text>
					</view>
					<view class="cart u-f-jse">
						<cart-control style="margin-top: 10rpx;" :food="item" :carList='carList' @cartChange='handelCart'></cart-control>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商品分类 -->
		<!-- #ifdef MP-WEIXIN -->
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft" :style="{top: Custom + 'px'}">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
		<!-- #endif -->
			<view class="cu-item" :class="index == currentIndex ? 'active' : ''" v-for="(item, index) in sortList" @tap="TabSelect(index,item.id)">
				<!-- <view class="cu-pic"><image src="../../static/goods/2.jpg"></image></view> -->
				<view>{{item.name}}</view>
				<view class="bor-bottom round" :class="index == currentIndex ? ' cur' : ''"></view>
			</view>
		</scroll-view>
		<!-- 商品列表 -->
		<view class="foods-wrapper bg-white">
			<goods-container id="goods-container" :scrollBottom='scrollBottom' :typeId='typeId' :car='carList'></goods-container>
		</view>
		<!-- 回顶按钮 -->
		<view class="topback" v-if="showback" @tap="gotop"><text class="icon iconfont icon-ai-top"></text></view>
		<shop-cart v-if="carList.length" :goods="carList" @delAll="delAll" @change='handelCart'></shop-cart>
		<our-loading  :active='loading' :translateY='90' text="" :isFullScreen='true' />
	</view>
</template>

<script>
	import Request from '@/common/js/luch-request/index.js'
	import goodsContainer from '@/components/goods-container/goods-container.vue'
	import main from '@/database/main.js'
	const http = new Request();
	import Vue from 'vue';
	export default {
		components:{
			goodsContainer,
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				Custom: this.CustomBar,
				// #endif
				StatusBar: this.StatusBar,
				pickUpPoint: {},	//自提点信息
				navTop:0,		//商品列表位置
				navList: main.indexData.navList,
				tab: main.indexData.tab,
				sortList:[] ,        //商品分类
				currentIndex:0,		//当前分类
				scrollLeft:0,
				typeId:3,			//商品分類id
				advertList: [], 	//轮播图
				scrollBottom:0,		//触底时间戳
				carList: [],
				seckillList:[],    //秒杀商品
				total:0,
				list:[],
				demo_data: main.indexData.news,		//滚动消息
				timer:0,
				modalSpec2: true,
				showback: false,		//是否显示返回顶部按钮
				loading: false,
			};
		},
		onReady() {
			this.getInfo()
		},
		onLoad() {
			this.getAdvertList()
			this.getKill()
			// 商品分类
			this.$http.post('/api/product/categories',{}, { header: { authType: 'false'}}).then(res => {
				this.sortList = JSON.parse(res.data) || []
				this.typeId = this.sortList[0].id
				setTimeout(()=>{
					this.loading = false
				},1000)
			})
			this.timer =  setInterval(()=>{
				this.add()
			},4000)
		},
		onShow() {
			this.carList = this.$store.state.carList
			this.pickUpPoint = uni.getStorageSync('pickUpPoint')
			this.seckillList.forEach(item =>{
				// #ifdef MP-WEIXIN
				item.count = 0
				// #endif
				if(this.carList.length == 0 || !this.carList){
					item.count = 0
				}else{
					this.carList.forEach(pro => {
						if (item.id == pro.id) {
							item.count = pro.count;
						}
					});
				}
			})
		},
		methods:{
			// 获取首页轮播图
			getAdvertList(){
				this.$http.post('/api/advert/load', {type:"1"}, { header: { authType: 'false'}}).then(res => {
					if(res.data){
						this.advertList = JSON.parse(res.data) || []
					}
				})
			},
			// 获取秒杀商品
			getKill(){
				this.$http.post('/api/search/products/secKillPage', {moudleId:"1",currentPage:0,pageSize:6}, { header: { authType: 'false'}}).then(res => {
					this.total = res.data.total
					if(this.total == 0) return 
					res.data.rows.forEach(item =>{
					Vue.set(item, 'count', 0);
					if(!this.carList) return
					// 遍历购物车给商品列表赋值
					this.carList.forEach(car => {
						if (item.id == car.id) {
							item.count += car.count;
						}
					});
					})
					this.seckillList = [...this.seckillList,...res.data.rows]
				})
			},
			// 购物车
			handelCart(item){
				this.carList = this.$store.state.carList || []
				this.seckillList.forEach(pro=>{
					if(pro.id == item.id){
						pro.count = item.count 
					}
				})
			},
			// 清空购物车
			delAll(){
				this.carList = []
				this.seckillList.forEach(item=>{
					item.count = 0
				})
			},
			TabSelect(index,id){
				this.currentIndex = index
				this.typeId = id
				this.scrollBottom = 0
				this.scrollLeft = (index - 1) * 80;
				this.showback = false;
				uni.pageScrollTo({
					scrollTop: this.navTop,
					duration: 0
				});
			},
			// 获取盒子在页面滚动的位置
			getInfo() {
				   let _this=this
				   let height=""
				   const query = uni.createSelectorQuery()
				   query.select('.nav').boundingClientRect()
				   query.selectViewport().scrollOffset()
				   query.exec(function(res){
					// debugger
					res[0].top       // #the-id节点的上边界坐标
					res[1].scrollTop // 显示区域的竖直滚动位置
					height=uni.getSystemInfoSync().screenHeight
					// #ifdef H5
					_this.navTop=height-res[0].height - 54
					// #endif
					// #ifdef MP-WEIXIN
					_this.navTop=height-res[0].height - uni.upx2px( 20 + 2*_this.StatusBar - _this.Custom)
					// #endif
					// _this.navTop = uni.upx2px(res[1].scrollHeight - (res[0].top + res[1].scrollTop))
				   })
			},
			// 回到顶部
			gotop() {
				this.showback = false;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			add() {
				//随机获取演示数据
				let randomItem = this.demo_data[Math.floor(Math.random() * this.demo_data.length)];
				//追加一条数据
				this.list = this.list.concat(randomItem);
				if(this.list.length > 10){
					this.list = []
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > this.navTop + 800) {
				this.showback = true;
			} else {
				this.showback = false;
			}
		},
		onReachBottom() {
			let timestamp = new Date().getTime();
			this.scrollBottom = timestamp;
		}
	}
</script>

<style lang="scss" scoped>
/* #ifdef APP-PLUS-NVUE */
	@function unit($num) {
		@return $num + 0rpx;
	}
	/* #endif */
	/* #ifndef APP-PLUS-NVUE */
	@function unit($num) {
		@return $num + 0upx;
	}
// 顶部
.Title {
	margin-right: 20rpx;
	display: block;
	flex-shrink: 0;
	height: 60%;
}
.search_box {
	margin-right: 30upx;
	width: 450upx;
	height: 64upx;
	background-color: #fff;
	border-radius: 32upx;
	padding: 0upx 40upx;
	.prompt,.iconfont{
		font-size: 28upx;
		color: #cccccc!important;
	}
}
.nav-tab {
	position: relative;
	background: linear-gradient(to right,#2ba4f7,#8cd8fe);
	border-bottom-left-radius: 180rpx;
	border-bottom-right-radius: 180rpx;
	padding: 0 28rpx;
	z-index: 9;
	color: #fff;
	font-size: 26rpx;
	.top {
		font-size: 24rpx;
		.icon {
			margin-right: 10rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #fff;
		}
	}
	.choose-post {
		background-color: rgba($color: #fff, $alpha: 0.2);
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 18rpx;
		color: #fff;
		.post {
			border-right: 1rpx solid #fff;
		}
		.post-name{
			max-width: 77%;
		}
		.icon {
			color: #FFFFFF;
			font-size: 26rpx;
		}
		.flex1{
			flex: 1;
		}
		.change{
			padding-right: 10rpx;
		}
	}
	button.pro-button {
		padding: 0;
		background-color: rgba($color: #fff, $alpha: 0);
		color: #fff;
		text-align: center;
		font-size: 26rpx;
		line-height: 1;
		margin: 0!important;
	}
	
}
// 轮播图
.tui-banner-swiper {
	margin: 20rpx 0;
	height: 280upx;
	border-radius: 12rpx;
	overflow: hidden;
	transform: translateY(0);
	z-index: 88;
}
.tui-slide-image {
	width: 100%;
	height: 280upx;
	border-radius: 20upx;
	display: block;
}
// 金刚区
.unicorn-header2 {
	margin: 20upx;
	background-color: #ffffff;
	border-radius: 20upx;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}

.menu {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 24upx;
	color: #555;
	margin-bottom: 20upx;
	padding: 5upx 0 20upx;
	.menu-in {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 15upx;
		.menu-img {
			height: 100upx;
			width: 100upx;
			display: block;
			flex-shrink: 0;
			background-color: #ffffff;
		}

		.menu-name {
			transform: scale(0.9);
			line-height: 50upx;
		}
	}
}
// 分类
.nav {
	position: sticky;
	/* #ifdef H5 APP-NVUE */
	top: unit(88);
	/* #endif */
	background-color: #F0F0F0;
	z-index: 9;
	padding-top: 20rpx;
	.cu-item {
		height: 70rpx;
		line-height: 44upx;
		font-size: 28rpx;
		text-align: center;
		padding: 0;
		margin: 0 18rpx;
		
	}
	.active {
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}
	.bor-bottom.cur {
		height: 10rpx;
		width: 80%;
		margin: 0 auto;
		margin-top: 6rpx;
		border-radius: 5rpx;
		background: #16a7ef;
		animation-name: myfade;
		animation-duration: 0.2s;
		animation-timing-function: linear;
	}
}
@keyframes myfade {
	0% {
		width: 0;
		opacity: 0;
	}

	100% {
		width: 80%;
		opacity: 1;
	}
}
// 秒杀专区
.seckill-box {
	padding: 20rpx 25rpx;
	margin: 0 18rpx 10rpx;
	height: 450upx;
	border-radius: 20rpx;
	box-shadow: 0px 15px 12px -15px #fcc9c9 inset;
	.seckill-tit{
		width: 32upx;
		display: block;
		flex-shrink: 0;
		margin-right: 10rpx;
	}
	.icon{
		font-size: 24rpx;
		padding-top: 10rpx;
	}
}
.scroll-box {
	white-space: nowrap;
}
.seckill-item {
	position: relative;
	width: 30%;
	display: inline-block;
	overflow: hidden;
	margin-right: 20upx;
	image {
		height: 206upx;
		width: 206upx;
		border-radius: 20rpx;
	}
	.price {
		text-align: center;
	}
	.title{
		color: #000000;
	}
	.cart{
		margin-top: -20rpx;
	}
	.discount{
		position: absolute;
		top: 0;
		left: 0;
	}
}
// 加入购物车按钮
.count{
	position: absolute;
	background-color: #F22222;
	color: #fff;
	border-radius: 100%;
	width: 40rpx;
	height: 40rpx;
	right: 3px;
}
// 商品列表
.foods-wrapper {
	position: relative;
	margin-top: 10px;
	// overflow: hidden;
	padding: 20rpx 0 100rpx;
	min-height: 100vh;
}

.tui-flex-1 {
	padding: 10rpx;
	flex: 1;
}
.discount{
	background-color: #7434ff;
	padding: 4rpx 22rpx;
	border-top-left-radius: 20rpx;
	border-bottom-right-radius: 30rpx;
	color: #fff;
	font-size: 24rpx;
}
// 回顶按钮
.topback {
	position: fixed;
	bottom: 210rpx;
	right: 20rpx;
	text-align: center;
	height: 78rpx;
	width: 78rpx;
	line-height: 78rpx;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 100%;
	animation-name: myback;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	.icon {
		font-size: 34rpx;
		color: #fff;
	}
}
@keyframes myback {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
</style>
